<template>
  <KView class="sys-tabs">
    <KView class="sys-tabs-title">
      <KView v-for="tab in tabs" :key="`tab_${tab.id}`" :class="{select:tab.id===value}" @click="tabClick(tab)">
        <span>{{tab.label}}</span>
      </KView>
    </KView>
    <KView class="sys-tabs-content">
      <slot :tab="currentTab"></slot>
    </KView>
  </KView>
</template>

<script>
  export default {
    props: {
      value: {
        type: [Number, String],
        required: true
      },
      tabs: {
        type: Array,
        required: true
      },
      beforeClick:Function
    },

    computed: {
      currentTab() {
        return this.getCurrentTab(this.value);
      }
    },

    data() {
      return {};
    },

    methods: {
      getCurrentTab(id) {
        let tabs = this.tabs;
        let tab = tabs.find(obj => {
          return obj.id === id;
        });
        return tab
      },

      tabClick(tab) {
        let id = tab.id;
        if (id === this.value) {
          return;
        }

        let beforeClick = this.beforeClick;
        if (beforeClick !== undefined) {
          if (!beforeClick(tab)) {
            return;
          }
        }

        this.$emit('input', id);
        this.$emit('tab-change', id, tab);
      }
    }
  };

</script>

<style lang="scss">
  .sys-tabs {
    height: 100%;
    position: relative;

    .sys-tabs-title {
      height: formatPx(82);
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;

      >div {
        height: 100%;
        line-height: formatPx(82);
        font-size: formatPx(28);
        padding: 0 formatPx(36);
        white-space: nowrap;

        &.select {
          background: #59C264;
          color: #ffffff;
          border-top-left-radius: formatPx(8);
          border-top-right-radius: formatPx(8);
        }
      }
    }

    .sys-tabs-content {
      height: calc(100% - #{formatPx(82)});
      overflow: hidden;
      border-radius: formatPx(8);
      border-top-left-radius: 0;
    }
  }

</style>
